<template>
  <div>
    <h1 align="center">记单词计划</h1>
    <div class="func">
      单词：
      <input type="text" v-model="vocabulary.word" />
      释义：
      <input type="text" v-model="vocabulary.meaning" />
      例句：
      <input type="text" v-model="vocabulary.example" />
      <button @click="add">新增</button>
    </div>
    <div class="main">
      <!-- 今日计划 -->
      <div class="up">
        <h3 align="center">今日计划</h3>
        <p v-for="(item,index) in vocabulary.list" :key="index">
          {{
          `${index+1} 单词：${item.word} 释义：${item.word}例句：${item.example}`
          }}
          <button
            @click="rem(index)"
          >已会</button>
          <button @click="unknow(index)">不认识</button>
        </p>
      </div>
      <!-- 重新记忆 -->
      <div class="middle">
        <h3 align="center">重新记忆</h3>
        <h4 align="center" v-if="vocabulary.flag">暂无</h4>
        <p
          v-for="(item, index) in vocabulary.relist"
          :key="index"
        >{{`${index+1} 单词：${item.word} 释义：${item.word}例句：${item.example}`}}</p>
      </div>
      <!-- 今日新增 -->
      <div class="bottom">
        <h3 align="center">今日新增</h3>
        <p
          v-for="(item,index) in vocabulary.newlist"
          :key="index"
        >{{`${index+1} 单词：${item.word} 释义：${item.word}例句：${item.example}`}}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const vocabulary = reactive({
  flag: true,
  list: [
    {
      word: "apple",
      meaning: "苹果",
      example: "I love apples!"
    },
    {
      word: "pear",
      meaning: "梨",
      example: "I love pear!"
    },
    {
      word: "peach",
      meaning: "桃子",
      example: "I love peach!"
    },
    {
      word: "banana",
      meaning: "香蕉",
      example: "I love banana!"
    },
    {
      word: "orange",
      meaning: "橙子",
      example: "I love orange!"
    },
    {
      word: "grape",
      meaning: "葡萄",
      example: "I love grape!"
    }
  ],
  relist: [],
  word: "",
  meaning: "",
  example: "",
  newlist: []
});
function rem(index) {
  vocabulary.list.splice(index, 1);
}
function unknow(index) {
  if (vocabulary.relist !== []) {
    vocabulary.flag = false;
  }
  vocabulary.relist.push({
    word: vocabulary.list[index].word,
    meaning: vocabulary.list[index].meaning,
    example: vocabulary.list[index].example
  });
  vocabulary.list.splice(index, 1);
}
function add() {
  vocabulary.newlist.push({
    word: vocabulary.word,
    meaning: vocabulary.meaning,
    example: vocabulary.example
  });
}
</script>

<style>
.main {
  width: 700px;
  border: 3px solid green;
  margin: 0 auto;
}
.func {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
</style>
